<template>
    <div class="page-container">
        <div class="list-container">
            <el-form :model="search" :inline="true" size="small">
                <el-form-item label="商品名称:" prop="skuName">
                    <el-input v-model="search.skuName" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="filterSubmit">查询</el-button>
                    <el-button @click="filterReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" size="small" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />                
                <el-table-column label="商品ID" prop="skuId"></el-table-column>
                <el-table-column label="商品图" prop="thumb" width="80px">
                    <template #default="scope">
                        <el-image style="width: 30px; height: 30px" :src="scope.row.skuDefaultImg" fit="cover"
                            :preview-src-list="[scope.row.skuDefaultImg]" :preview-teleported="true">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><ele-Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="skuName"></el-table-column>
                <el-table-column label="商品类型" prop="goodsType">
                    <template #default="scope">
                        <template v-for=" item, index in goodsTypeOptions" :key="index">
                            <el-tag class="spec-tag" size="small" effect="light"
                                v-if="scope.row.goodsType == item.value">{{ item.label }}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="商品售价" prop="price" width="80px"></el-table-column>
                <el-table-column label="可获提成" prop="saleMoney" >
                    <template #default="scope">
                        <span style="color: red">
                            ￥ {{ ((scope.row.saleMoney * saleSetting.twoSaleMoney) / 100).toFixed(2) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="库存" prop="stock" width="80px"></el-table-column>
                <el-table-column width="200px" label="操作" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="openDetail(scope.row)">查看</el-button>
                        <!-- <el-button size="small" type="primary" link @click="editRow(scope.row)">编辑</el-button>
                      <el-button size="small" type="primary" link @click="delRow(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="page-block">
            <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
                :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                :total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div> -->
        <phone-model v-model:dialogDrawer="dialogPhone" :defaultForm="detail"></phone-model>
    </div>
</template>
  
<script>
import { toRefs, reactive, onMounted } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import PhoneModel from '../../shop/components/PhoneModel.vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList, upShop, remove } from '/@/api/pms/spu'
import api from '/@/api/commonApi'
export default {
    name: 'OptimumList',
    components: {
        PhoneModel
    },
    setup() {
        const router = useRouter()
        const state = reactive({
            search: {
                current: 1,
                size: 10,
                skuName: ''
            },
            list: [],
            total: 0,
            current: 1,
            page: 10,
            detail: {},
            saleSetting: {},
            dialogPhone: false,
            goodsTypeOptions: [{
                label: '普通商品',
                value: 0
            }, {
                label: '卡密/网盘',
                value: 1
            }, {
                label: '优惠券',
                value: 2
            }, {
                label: '虚拟商品',
                value: 3
            }],
            goodsDict: {
                0: '普通商品',
                1: '卡密/网盘',
                2: '优惠卷',
                3: '虚拟商品'
            },
            multipleSelection: []
        })
        const bindSearch = () => {
            getList()
        }
        const addGoods = () => {
            router.push({
                path: '/shop/goods-add'
            })
        }
        const changeRow = (e, row) => {
            let ids = []
            ids.push(row.id)
            upGoods(ids, row.publishStatus)
        }
        const openDetail = row => {
            state.detail = row
            state.detail.images = [row.skuDefaultImg]
            state.dialogPhone = true
        }
        const editRow = row => {
            router.push({
                path: '/shop/goods-edit',
                query: {
                    id: row.id
                }
            })
        }
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.spuName + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })
            }).catch()
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        const getList = () => {
            api.getSaleGoods(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const upGoods = (ids, status) => {
            upShop({ ids: ids, status: status }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('操作成功')
                    getList()
                } else {
                    ElMessage.error('操作失败')
                }
            })
        }
        const upBatch = (val) => {
            let ids = []
            for (let m of state.multipleSelection) {
                ids.push(m.id)
            }
            upGoods(ids, val)
        }
        const handleSelectionChange = (val) => {
            state.multipleSelection = val
        }
        const getSaleSetting = () => {
            api.sevenSetting().then(res => {
                state.saleSetting = res.data
            })
        }
        const filterSubmit = () => {
            getList()
        }
        const filterReset = () => {
            state.search = {
                current: 1,
                size: 10,
                skuName: ''
            }
            getList()
        }

        onMounted(() => {
            getList()
            getSaleSetting()
        })
        return {
            Plus,
            Search,
            addGoods,
            changeRow,
            openDetail,
            editRow,
            delRow,
            handleSizeChange,
            handleCurrentChange,
            bindSearch,
            upGoods,
            upBatch,
            filterSubmit,
            filterReset,
            getSaleSetting,
            handleSelectionChange,
            ...toRefs(state)
        }
    }
}
</script>
  
<style scoped lang="scss">
.list-container {
    background: var(--next-color-white);

    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}

.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}
</style>